<template>
	<view class="smart-page">
		<!--页面标题头begin-->
		<view class="smart-page-head">
			<view class="smart-page-head-title">input输入控件</view>
		</view>
		<!--页面标题头end-->
		<view>
			<view>可自动获取焦点</view>
			<view><input class="smart-input" focus="true" placeholder="请输入手机号"></view>
		</view>
		
		<view>
			<view>右下角显示搜索</view>
			<view><input class="smart-input" confirm-type="search" placeholder="输入要搜索的内容"></view>
		</view>
		
		<view>
			<view>控制最大输入长度</view>
			<view><input class="smart-input" maxlength="5" confirm-type="search" placeholder="请输入内容"></view>
		</view>
		
		<view>
			<view>密码输入</view>
			<view><input class="smart-input" password="true" placeholder="请输入密码"></view>
		</view>
		
		<view>
			<view>可查看密码</view>
			<view>
				<input class="smart-input" :password="showPassword" placeholder="请输入密码">
				<image class="eye" src="../../static/eye.png" @click="changePassword()"></image>
			</view>
		</view>
		
		<view>
			<view>同步获取</view>
			<view><input class="smart-input" @input="onKeyInput"></view>
			<view><text>{{inputValue}}</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPassword:true,
				inputValue:''
			}
		},
		methods: {
			/* 显示隐藏密码 */
			changePassword(){
				console.log('点击...');
				this.showPassword=!this.showPassword;
			},
			/* 输入事件 */
			onKeyInput(event){
				console.log(event.detail.value);
				this.inputValue=event.detail.value;
			}
		}
	}
</script>

<style>
	.eye {
		width: 74upx;
		height: 74upx;
	}

	.wrapper {
		display: flex;
	}
</style>